<template>
    <div class="app-container project-operate-container">
        <div v-if="opt != 'add'">
            <el-descriptions title="">
                <el-descriptions-item label="序号">
                    <el-tag size="medium">{{ obj != null ? obj.index : index }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>


                <el-form :model="form" ref="form" :rules="rulesProject" label-width="100px">
                    <el-row style="margin: 0px 0px 0px 550px;">项目基本信息</el-row>
                    <el-row style="margin-top:20px">
                        <el-col :span="8">
                            <el-form-item label="项目编号" prop="projectNumber" label-width="110px">
                                <el-input v-model="form.projectNumber" placeholder="请输入项目编号"
                                disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="项目名称" prop="projectName" label-width="110px">
                                <el-input v-model="form.projectName" placeholder="请输入项目名称"
                                    disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="项目负责人" prop="projectLeader" label-width="110px">
                                <el-input v-model="form.projectLeader" disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="执行人" prop="executorName" label-width="110px">
                                <el-input v-model="form.executorName" disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="费用" prop="sumAmount" label-width="110px">
                                <el-input v-model="form.sumAmount" disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="启动时间" prop="attackTime" label-width="110px">
                                <el-date-picker clearable :disabled="opt == 'details'" style="width: 293px" v-model="form.attackTime"
                                    type="date" value-format="yyyy-MM-dd" placeholder="请选择启动时间" disabled="true">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="完成时间" prop="completeTime" label-width="110px">
                                <el-date-picker clearable :disabled="opt == 'details'" style="width: 293px" v-model="form.completeTime"
                                    type="date" value-format="yyyy-MM-dd" placeholder="请选择完成时间" disabled="true">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="项目阶段" prop="node" label-width="110px">
                        <div class="progress-bar">
                            <ul class="yd-step-content" >
                                <li :class="item.calssCss" v-for="item in approvalProcessProject" :id="item.id">
                                    <em class="yd-step-checkmark"> <i></i></em>
                                    <div class="yd-step-item-bottom"><p>{{item.value}}</p></div>
                                </li>
                            </ul>
                        </div>
                    </el-form-item>
                    <el-form-item label="交付物" >
                        <file-view :type="fjFileType" :businessId="businessId"
                        :businessCode="businessCode" ></file-view>
                    </el-form-item>
                </el-form>
    <div style="text-align: center;margin-top:20px" >
        <!-- <el-button type="primary" @click="submitOK">保 存</el-button> -->
        <el-button @click="cancel" v-if="opt!='details'">关 闭</el-button>
    </div>
    </div>
</template>
<script>
import {getScheduleName } from "@/api/project/projectSchedule";
import {getProjectInfo,updateProjectInfo } from "@/api/project/projectInfo";
import { getSubInfo } from "@/api/project/subInfo";
import FileTree from "@/components/File/index";
import FileView from "@/components/FileView/index"
import { download } from "@/utils/request";
import pdf from 'vue-pdf'
export default {
    name: "deliveryInfo",
    components: { FileTree,FileView,pdf },
    props: {
        opt: {
            type: String,
            default: ""
        },
        id: {
            type: String,
            default: ""
        },
        sign: {
            type: String,
            default: ""
        },
        obj: {
            type: Object,
            default: null
        },
        //序号
        index: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            refreshKey: 0,
            fjFileType:1,
            businessId: null,
            businessCode: 'project_delivery',
            //阶段信息-----
            approvalProcessProject:[],
            //-----
            radio:'1',
            typeShow:true,
            readonly: true,
            checkCount:0,
            isShowTab:true,
            UUID: '',
            optionData: null,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],

            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            honorShow: '0',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                enterpriseId: null,
            },
            queryParamsSchedule: {
                projectId: null,
                state:null
            },
            // 表单参数
            formSchedule: {
                //administrativeArea:''
                stageDesc:null,
                stageName:null,
                creationName:this.$store.state.user.name,
                creationTime:this.parseTime(new Date(), '{y}-{m}-{d}'),
            },
            // 表单参数
            formStage: {
                //administrativeArea:''
                ProjectId:null,
                name:null,
                state:null,
            },
            form:{},
            // 表单校验
            rules: {


            },
            rulesProject:{

            },
            list:[],
        };
    },
    created() {

        //this.getList();
        let url = window.location.href;
        // 获取参数部分
        let params = url.split('?')[1];
        this.bId = this.id;
        this.businessId = this.id
        this.handleUpdate(this.id,this.sign)
        if(this.opt=="details"){
            this.fjFileType=2
        }

        this.listScheduleName()
    },
    methods: {

        listScheduleName() {
            this.queryParamsSchedule.projectId=this.id
            //** 查询项目阶段名称 根据项目id*/
            getScheduleName(this.queryParamsSchedule).then(response => {
                this.approvalProcessProject = response.data
                this.loading = true;
            });
        },
       /** 修改按钮操作 */
       handleUpdate(id,sign) {
         console.log(sign,"到底这里显示的是什么")
            if(sign=="主"){
                getProjectInfo(id).then(response => {
                    this.form = response.data;
                });
            }else{
                getSubInfo(id).then(response => {
                    this.form = response.data;
                    this.form.sumAmount = response.data.cost;

                });
            }
        },
        getFile(data) {
            //console.log(JSON.stringify(data))
        },
        // 关闭按钮
        cancel() {
            this.open = false;
            this.reset();
            this.$emit('change');
        },



        // 表单重置
        reset() {
            this.form = {
                stageDesc: null

            };
            this.resetForm("form");
        },
    }
};
</script>
<style type="text/css">
        /* CSS Document */
        body,div,ul ,li ,p{padding:0; margin: 0;}
        li{ list-style:none}
        body{background: #fff;}
        .progress-bar { width: 60%; height: 50px; position: relative; margin-right:90px;margin-bottom:30px; padding-top:30px;}
        .progress-bar-title{font-size: 16px; color: #333; font-weight: bold;position: absolute; top: 18px; left: 20px;}
        .yd-step-content {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
        .yd-step-item {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            position: relative;
        }
        .yd-step-item>em {border-radius: 50%;  position: absolute;  top: 50%; left: 50%; background-color: #fff; border:2px solid #ccc;}
        .yd-step-content .yd-step-item>em { width: 28px; height: 28px; margin-left: -13px; margin-top: -17px; z-index: 1002; cursor: pointer;}
        .yd-step-content .yd-step-item-current>em {border:2px solid #14CE67;}

        .yd-step-content .yd-step-item>em.yd-step-checkmark:after {
            content: "";
            position: absolute;
            top: 4px;
            left: 10px;
            border: 3px solid #ccc;
            border-top: 0;
            border-left: 0;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            width: 6px;
            height: 12px;
        }
        .yd-step-content .yd-step-item-current>em.yd-step-checkmark:after {
            content: "";
            position: absolute;
            top: 4px;
            left: 10px;
            border: 3px solid #14CE67;
            border-top: 0;
            border-left: 0;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            width: 6px;
            height: 12px;
        }

        .yd-step-content .yd-step-item:not(:first-child):before { width: 100%; left: -50%; }
        .yd-step-item:not(:first-child):before {
            content: "";
            height: 3px;
            position: absolute;
            top: -3px;
            background-color: #e0e0e0;
        }
        .yd-step-content .yd-step-item-current:before{background-color: #e0e0e0;}

        .yd-step-item-bottom {
            position: absolute;
            left: 0;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            padding: 0 4px;
        }
        .yd-step-content .yd-step-item-bottom { top: 24px; color: #a5a5a5; font-size: 16px; text-align: center;}
        .yd-step-item-current .yd-step-item-bottom p {color: #14CE67; font-weight: bold;}

    </style>
<style scoped lang="scss">
.project-operate-container {
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px;
  max-width: 100%;
  max-height: 90vh;
  box-sizing: border-box;
}
</style>
